<template>
  <div class="home">
    <div class="block">
      <el-carousel trigger="click" height="450px">
        <el-carousel-item v-for="(item, i) in lbimg" :key="i">
          <div class="lbbox" @click="gotoPage(item.id)">
            <img :src="item.url" alt="" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="hot_mes list">
      <h3>
        <i class="el-icon-position">热点资讯</i
        ><router-link to="hotTopic"
          >更多<i class="el-icon-arrow-right"></i
        ></router-link>
      </h3>
      <ul>
        <li
          v-for="(hotMes,i) in news"
          :key="hotMes.id"
          @click="newsParticulars(hotMes.id)"
        >
          <i>{{ i + 1 }}</i
          >{{hotMes.title}}
        </li>
      </ul>
    </div>
    <div class="major list">
      <h3>
        <i class="el-icon-position">我的专业 ： {{ myMajor }}</i
        ><router-link to="Search?type=0"
          >更多<i class="el-icon-arrow-right"></i
        ></router-link>
      </h3>
      <ul class="major_ul cardul clear">
        <Card v-for="ifem in myMajorList" :key="ifem.id" :liData="ifem"></Card>
      </ul>
    </div>
    <div class="major list">
      <h3>
        <i class="el-icon-position">精选视频</i
        ><router-link to="Search?type=1"
          >更多<i class="el-icon-arrow-right"></i
        ></router-link>
      </h3>
      <ul class="major_ul videocardul clear">
        <VideoCard
          v-for="ifem in videoList"
          :key="ifem.id"
          :liData="ifem"
         
        ></VideoCard>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Card from "../components/Card.vue";
import VideoCard from "../components/VideoCard.vue";
export default {
  data() {
    return {
      currentPage: 1,
      hotMes: 10,
      myMajor: "计算机科学与技术",
      myMajorList: [],
      videoList: [],
      news:[],
      lbimg: [
        { id: 1, url: require("../assets/img/lb1.jpg") },
        { id: 2, url: require("../assets/img/lb2.webp") },
        { id: 3, url: require("../assets/img/lb3.webp") },
        { id: 4, url: require("../assets/img/lb4.webp") },
        { id: 5, url: require("../assets/img/lb5.webp") },
      ],
    };
  },
  name: "Home",
  components: { Card, VideoCard },
  mounted() {
    this.getHomeData()
  },
  methods: {
    gotoPage(num) {
      console.log(num);
    },
    newsParticulars(id1, id2) {
      this.$router.push({
        path: "/Details/news",
        query: { newsID: id1, writerID: id2 },
      });
    },
    getHomeData(){
      axios.post(`http://localhost:3000/home`,{}).then((ret) => {
        if(ret.data.code==1){
          this.news=ret.data.news;
          this.myMajorList=ret.data.article;
          this.videoList=ret.data.video;
        }
      })
    },
    
  },
};
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}
.lbbox {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.list {
  padding: 20px;
}
.list > h3 {
  border-bottom: 2px solid #99a9bf;
  height: 50px;
}
.list > h3 > i {
  font-size: 20px;
  font-weight: 700;
}
.list > h3 > a {
  float: right;
  color: #606266;
}
.hot_mes > h3 > i {
  color: #f86400;
}
.hot_mes > ul {
  height: 300px;
  padding: 10px 30px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
}
.hot_mes > ul > li {
  height: 50px;
  margin: 5px 0;
  padding: 0 20px;
  line-height: 50px;
  transition: 00.3s;
  cursor: pointer;
}
.hot_mes > ul > li:hover {
  background-color: #e8f3fe;
}
.hot_mes > ul > li > i {
  display: inline-block;
  text-align: center;
  width: 50px;
  font-weight: 700;
  font-size: 18px;
  color: #ff8200;
}
.hot_mes > ul > li:nth-of-type(-n + 3) > i {
  color: #f26d5f;
}
.hot_mes > ul > li > span {
  float: right;
  color: #99a9bf;
}
.major h3 {
  color: #409eff;
}
.major ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 30px;
  background-color: #f6f9fa;
}
.fenye {
  background-color: #f6f9fa;
  text-align: center;
  padding: 20px;
}
.cardul li {
  margin: 10px 30px;
}
.videocardul li {
  margin: 10px;
}
</style>
